<template>
  <div>
    <div id="nc"></div>
  </div>
</template>

<script setup>
  import '@/utils/captcha.js'
  import { onMounted } from "vue";

  const emit = defineEmits(['slideCallback'])
  const nc_token = ["FFFF0N0000000000848F", (new Date()).getTime(), Math.random()].join(':');
  const NC_Opt =
      {
        renderTo: "#nc",
        appkey: "FFFF0N0000000000848F",
        scene: "nc_login",
        token: nc_token,
        customWidth: 350,
        trans:{"key1":"code0"},
        elementID: ["usernameID"],
        is_Opt: 0,
        language: "cn",
        isEnabled: true,
        timeout: 3000,
        times:5,
        apimap: {
          // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
          // 'get_captcha': '//b.com/get_captcha/ver3',
          // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
          // 'get_img': '//c.com/get_img',
          // 'checkcode': '//d.com/captcha/checkcode.jsonp',
          // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
          // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
          // 'umid_serUrl': 'https://g.com/service/um.json'
        },
        callback: function (data) {
          emit('slideCallback',data)
        }
      }

  const resetCaptcha = () => {
    // eslint-disable-next-line no-undef
    const nc = new noCaptcha(NC_Opt)

    nc.reset();
  }
  onMounted(() => {

    // eslint-disable-next-line no-undef
    const nc = new noCaptcha(NC_Opt)

    nc.reset();//请务必确保这里调用一次reset()方法
    nc.upLang('cn', {
      'LOADING':"加载中...",//加载
      'SLIDER_LABEL': "请按住滑块，拖动到右边",//等待滑动
      'CHECK_Y':"验证通过",//通过
      'ERROR_TITLE':"非常抱歉，这出错了...",//拦截
      'CHECK_N':"验证未通过", //准备唤醒二次验证
      'OVERLAY_INFORM':"经检测你当前操作环境存在风险，请输入验证码",//二次验证
      'TIPS_TITLE':"验证码错误，请重新输入"//验证码输错时的提示
    })
  })
  defineExpose({
    resetCaptcha
  })


</script>

<style lang="scss">
#nc {
  width: 100%;
  display: contents;
  .nc_scale{
    height: 50px;
    background-color: $focusContent;
  }
  .nc_scale .btn_slide{
    height: 48px;width: 48px;line-height: 48px;
    border-radius: 2px;
    font-weight: bold;
    color: $mainColor;
    font-size: 23px;
  }
  .nc-lang-cnt{
    height: 48px;line-height: 48px;color: $black_tips;
    b{color: $white;}
  }
  .nc_scale .btn_ok{
    height: 48px;line-height: 48px;width: 48px;
  }
  .nc_scale .nc_ok,.nc_scale .nc_bg{
    background-color: $hoverColor;
  }
}
</style>
